<template>
	<div class="account-container">
		<template v-if="props.gameStatus == 1">
			<div class="account-container-weapon-info">
				<template v-for="(item, index) in props.accounts" :key="index">
					<div class="account-item-split" v-if="index != 0"></div>
					<div class="account-item-type1" v-if="props.gameRoundStatus == 1">
						<img class="weapon1" :src="processImageUrl(item.weaponsImage)" />
						<img class="weapon2" :src="processImageUrl(item.weaponsImage)" />
						<img class="weapon3" :src="processImageUrl(item.weaponsImage)" />
					</div>
					<div class="account-item-type2" v-else></div>
				</template>
			</div>
		</template>
		<template v-if="props.gameStatus == 2"></template>
		<div class="account-container-items">
			<div class="account-container-item" v-for="(item, index) in props.accounts" :key="index">
				<img class="account-item-avatar" :src="processImageUrl(item.avatar)" />
				<div class="account-item-info">
					<div>
						<div class="account-item-name">{{ item.name }}</div>
						<div class="account-item-race">{{ item.race }}</div>
					</div>
					<div>
						<img class="account-item-balance-icon" src="@/static/img/battle/createBattle/icon_coin.png" />
						<span class="account-item-balance-value">{{ item.balance }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs } from 'vue';
import { processImageUrl } from '@/utils';

export default defineComponent({
	setup(props, { emit }) {
		// 创建一个响应式状态对象
		const state = reactive({
			loading: false
		});

		onMounted(() => {});

		return {
			...toRefs(state),
			processImageUrl,
			props
		};
	},
	components: {},

	props: {
		gameStatus: {
			type: Number,
			default: () => 0
		},
		gameRoundStatus: {
			type: Number,
			default: () => 0
		},
		gameResult: {
			type: Object,
			default: () => null
		},
		accounts: {
			type: Array,
			default: () => []
		}
	}
});
</script>

<style scope lang="scss">
@import '@/views/battle/components/CreateBattle/AccountContainer.scss';
</style>
